<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ClickHouse-MySQL同步工具 - 配置</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css/style.css">
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --accent-color: #e74c3c;
            --light-bg: #f8f9fa;
            --dark-bg: #343a40;
            --mysql-color: #4a69bd;
            --clickhouse-color: #27ae60;
            --config-color: #f39c12;
        }

        body {
            background-color: #f5f7fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .main-card {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: none;
        }

        .card {
            border-radius: 10px;
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            border-bottom: none;
            font-weight: 600;
        }

        .dashboard-header {
            background: linear-gradient(135deg, var(--primary-color), #4a69bd);
            color: white;
            padding: 20px 30px;
        }

        .btn {
            border-radius: 8px;
            font-weight: 500;
            padding: 10px 20px;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-outline-light:hover {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
        }

        .form-control,
        .form-select {
            border-radius: 8px;
            border: 1px solid #e1e5eb;
            padding: 12px 15px;
            transition: all 0.2s ease;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.1);
        }

        .form-label {
            font-weight: 500;
            color: #495057;
            margin-bottom: 8px;
        }

        .form-check-input:checked {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .config-section {
            position: relative;
            padding: 0;
            margin-bottom: 30px;
        }

        .config-icon {
            font-size: 1.5rem;
            margin-right: 10px;
            vertical-align: middle;
        }

        .mysql-header {
            background: linear-gradient(135deg, #3742fa, var(--mysql-color));
        }

        .clickhouse-header {
            background: linear-gradient(135deg, #20bf6b, var(--clickhouse-color));
        }

        .sync-header {
            background: linear-gradient(135deg, #f39c12, #e67e22);
        }

        .nav-tabs {
            border-bottom: none;
            margin-bottom: 20px;
        }

        .nav-tabs .nav-link {
            border: none;
            border-radius: 8px;
            padding: 10px 20px;
            margin-right: 10px;
            color: #6c757d;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .nav-tabs .nav-link:hover {
            background-color: #f8f9fa;
            color: var(--primary-color);
        }

        .nav-tabs .nav-link.active {
            color: var(--primary-color);
            background-color: rgba(52, 152, 219, 0.1);
            border-bottom: 3px solid var(--primary-color);
        }

        .config-card {
            margin-bottom: 0;
            height: 100%;
        }

        /* Toast样式 */
        .toast-container {
            pointer-events: auto;
            max-width: 100%;
            margin-right: 15px;
        }

        .toast {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            margin-bottom: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            min-width: 350px;
            max-width: calc(100% - 30px);
            border-radius: 8px;
            overflow: hidden;
        }

        .toast.show {
            opacity: 1;
        }

        .toast .toast-body {
            padding: 12px 15px;
            font-weight: 500;
            font-size: 16px;
        }

        .toast .btn-close {
            opacity: 0.8;
            box-shadow: none !important;
            outline: none !important;
            border: none !important;
            background: transparent;
        }

        .toast .btn-close:hover {
            opacity: 1;
        }

        .toast .btn-close:focus {
            box-shadow: none !important;
        }

        /* 自定义关闭按钮样式 */
        .btn-close-custom {
            background: transparent;
            border: none;
            padding: 0;
            cursor: pointer;
            transition: opacity 0.2s ease;
        }

        .btn-close-custom:hover {
            opacity: 1 !important;
        }

        .btn-close-custom:focus {
            outline: none;
            box-shadow: none;
        }
    </style>
</head>

<body>
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-12 col-xl-10">
                <div class="main-card card">
                    <div class="dashboard-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h2 class="mb-0"><i class="bi bi-gear-wide-connected me-2"></i>ClickHouse-MySQL同步配置</h2>
                            <a href="index.html" class="btn btn-outline-light btn-sm">
                                <i class="bi bi-house-door-fill me-1"></i>返回主页
                            </a>
                        </div>
                    </div>
                    <div class="card-body p-4">
                        <ul class="nav nav-tabs" id="configTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="database-tab" data-bs-toggle="tab"
                                    data-bs-target="#database" type="button" role="tab" aria-controls="database"
                                    aria-selected="true">
                                    <i class="bi bi-database me-1"></i>数据库连接
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="sync-tab" data-bs-toggle="tab" data-bs-target="#sync"
                                    type="button" role="tab" aria-controls="sync" aria-selected="false">
                                    <i class="bi bi-arrow-repeat me-1"></i>同步设置
                                </button>
                            </li>
                        </ul>

                        <form id="config-form">
                            <div class="tab-content" id="configTabContent">
                                <!-- 数据库连接配置选项卡 -->
                                <div class="tab-pane fade show active" id="database" role="tabpanel"
                                    aria-labelledby="database-tab">
                                    <div class="row g-4">
                                        <!-- MySQL配置 -->
                                        <div class="col-md-6">
                                            <div class="card config-card">
                                                <div class="card-header mysql-header text-white py-3">
                                                    <h5 class="mb-0">
                                                        <i class="bi bi-filetype-sql config-icon"></i>MySQL配置
                                                    </h5>
                                                </div>
                                                <div class="card-body">
                                                    <div class="mb-3">
                                                        <label for="mysql-host" class="form-label">主机地址</label>
                                                        <!-- MySQL主机地址 -->
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-hdd-network"></i></span>
                                                            <input type="text" class="form-control" id="mysql-host"
                                                                name="mysqlHost" placeholder="localhost">
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="mysql-port" class="form-label">端口</label>
                                                        <!-- MySQL端口 -->
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-ethernet"></i></span>
                                                            <input type="number" class="form-control" id="mysql-port"
                                                                name="mysqlPort" placeholder="3306">
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="mysql-username" class="form-label">用户名</label>
                                                        <!-- MySQL用户名 -->
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-person"></i></span>
                                                            <input type="text" class="form-control" id="mysql-username"
                                                                name="mysqlUsername" placeholder="root">
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="mysql-password" class="form-label">密码</label>
                                                        <!-- MySQL密码 -->
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-key"></i></span>
                                                            <input type="password" class="form-control"
                                                                id="mysql-password" name="mysqlPassword">
                                                            <button class="btn toggle-password" type="button"
                                                                data-target="mysql-password"
                                                                style="border-color: #e1e5eb; color: #6c757d; background: white;">
                                                                <i class="bi bi-eye"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="mysql-database" class="form-label">数据库名</label>
                                                        <!-- MySQL数据库名 -->
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-archive"></i></span>
                                                            <input type="text" class="form-control" id="mysql-database"
                                                                name="mysqlDatabase">
                                                        </div>
                                                    </div>
                                                    <!-- 添加测试连接按钮 -->
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-outline-primary"
                                                            id="test-mysql-connection">
                                                            <i class="bi bi-check-circle me-1"></i>测试连接
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- ClickHouse配置 -->
                                        <div class="col-md-6">
                                            <div class="card config-card">
                                                <div class="card-header clickhouse-header text-white py-3">
                                                    <h5 class="mb-0">
                                                        <i class="bi bi-database-fill config-icon"></i>ClickHouse配置
                                                    </h5>
                                                </div>
                                                <div class="card-body">
                                                    <div class="mb-3">
                                                        <label for="clickhouse-host" class="form-label">主机地址</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-hdd-network"></i></span>
                                                            <input type="text" class="form-control" id="clickhouse-host"
                                                                name="clickhouseHost" placeholder="localhost">
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="clickhouse-port" class="form-label">端口</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-ethernet"></i></span>
                                                            <input type="number" class="form-control"
                                                                id="clickhouse-port" name="clickhousePort"
                                                                placeholder="8123">
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="clickhouse-username" class="form-label">用户名</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-person"></i></span>
                                                            <input type="text" class="form-control"
                                                                id="clickhouse-username" name="clickhouseUsername"
                                                                placeholder="default">
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="clickhouse-password" class="form-label">密码</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-key"></i></span>
                                                            <input type="password" class="form-control"
                                                                id="clickhouse-password" name="clickhousePassword">
                                                            <button class="btn toggle-password" type="button"
                                                                data-target="clickhouse-password"
                                                                style="border-color: #e1e5eb; color: #6c757d; background: white;">
                                                                <i class="bi bi-eye"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="clickhouse-database" class="form-label">数据库名</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-archive"></i></span>
                                                            <input type="text" class="form-control"
                                                                id="clickhouse-database" name="clickhouseDatabase">
                                                        </div>
                                                    </div>
                                                    <!-- 添加测试连接按钮 -->
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-outline-primary"
                                                            id="test-clickhouse-connection">
                                                            <i class="bi bi-check-circle me-1"></i>测试连接
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 同步设置选项卡 -->
                                <div class="tab-pane fade" id="sync" role="tabpanel" aria-labelledby="sync-tab">
                                    <div class="card">
                                        <div class="card-header sync-header text-white py-3">
                                            <h5 class="mb-0">
                                                <i class="bi bi-arrow-left-right config-icon"></i>同步配置
                                            </h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="row g-4">
                                                <div class="col-md-6">
                                                    <div class="mb-4">
                                                        <label for="sync-mode" class="form-label">同步模式</label>
                                                        <!-- 选择同步模式 -->
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-sliders"></i></span>
                                                            <select class="form-select" id="sync-mode" name="syncMode">
                                                                <option value="full">全量同步</option>
                                                                <option value="incremental">增量同步</option>
                                                                <option value="full_incremental">全量+增量同步</option>
                                                            </select>
                                                        </div>
                                                        <div class="form-text text-muted">选择适合您需求的同步模式</div>
                                                    </div>
                                                    <div class="mb-4">
                                                        <label for="sync-tables" class="form-label">同步表</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-table"></i></span>
                                                            <input type="text" class="form-control" id="sync-tables"
                                                                name="tableList" placeholder="table1,table2,table3">
                                                        </div>
                                                        <div class="form-text text-muted">多个表以逗号分隔，不填则同步所有表</div>
                                                    </div>
                                                    <div class="mb-4">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="delete-existing-tables"
                                                                name="syncDeleteExistingTables">
                                                            <label class="form-check-label"
                                                                for="delete-existing-tables">在创建新表之前删除已有的表</label>
                                                        </div>
                                                        <div class="form-text text-muted">如果选中，将在创建新表之前删除已有的表</div>
                                                    </div>
                                                    <div class="mb-4">
                                                        <label for="sync-disk-flush-interval"
                                                            class="form-label">磁盘刷新间隔</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-clock"></i></span>
                                                            <input type="number" class="form-control"
                                                                id="sync-disk-flush-interval" name="diskFlushInterval"
                                                                placeholder="例如：1000">
                                                        </div>
                                                        <div class="form-text text-muted">设置磁盘刷新间隔（毫秒），建议1000-5000</div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mb-4">
                                                        <label for="sync-batch-size" class="form-label">批处理大小</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-box-seam"></i></span>
                                                            <input type="number" class="form-control"
                                                                id="sync-batch-size" name="batchSize"
                                                                placeholder="1000">
                                                        </div>
                                                        <div class="form-text text-muted">每批次同步的数据行数，建议1000-5000</div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="card bg-light border-0">
                                                            <div class="card-body">
                                                                <div class="form-check form-switch mb-3">
                                                                    <input type="checkbox" class="form-check-input"
                                                                        id="binlog-enabled" name="binlogEnabled">
                                                                    <label class="form-check-label"
                                                                        for="binlog-enabled">启用binlog同步</label>
                                                                </div>
                                                                <div class="form-text mb-3">开启后将使用MySQL的binlog机制进行增量同步
                                                                </div>

                                                                <!-- Binlog配置区域 - 新增 -->
                                                                <div id="binlog-config-area"
                                                                    class="mb-3 ps-3 border-start border-primary"
                                                                    style="display: none;">
                                                                    <div class="mb-3">
                                                                        <label for="binlog-filename"
                                                                            class="form-label">Binlog文件名</label>
                                                                        <!-- 指定从哪个binlog文件开始同步 -->
                                                                        <div class="input-group">
                                                                            <span class="input-group-text"><i
                                                                                    class="bi bi-file-earmark-text"></i></span>
                                                                            <input type="text" class="form-control"
                                                                                id="binlog-filename"
                                                                                name="binlogFilename"
                                                                                placeholder="mysql-bin.000001">
                                                                        </div>
                                                                        <div class="form-text text-muted">
                                                                            指定从哪个binlog文件开始同步</div>
                                                                    </div>

                                                                    <div class="mb-3">
                                                                        <label for="binlog-position"
                                                                            class="form-label">Binlog位置</label>
                                                                        <div class="input-group">
                                                                            <span class="input-group-text"><i
                                                                                    class="bi bi-cursor"></i></span>
                                                                            <input type="number" class="form-control"
                                                                                id="binlog-position"
                                                                                name="binlogPosition" placeholder="4">
                                                                        </div>
                                                                        <div class="form-text text-muted">
                                                                            指定从binlog文件的哪个位置开始同步</div>
                                                                    </div>

                                                                    <!-- 上次同步位置信息 -->
                                                                    <div class="alert alert-info mt-3 mb-0"
                                                                        id="last-sync-info">
                                                                        <h6 class="alert-heading"><i
                                                                                class="bi bi-info-circle me-1"></i>上次同步位置
                                                                        </h6>
                                                                        <div
                                                                            class="d-flex justify-content-between align-items-center">
                                                                            <div>
                                                                                <small>文件: <span
                                                                                        id="last-binlog-file">未记录</span></small>
                                                                            </div>
                                                                            <div>
                                                                                <small>位置: <span
                                                                                        id="last-binlog-pos">未记录</span></small>
                                                                            </div>
                                                                            <button type="button"
                                                                                class="btn btn-sm btn-outline-primary"
                                                                                id="use-last-position">
                                                                                <i
                                                                                    class="bi bi-arrow-clockwise me-1"></i>使用上次位置
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="form-check form-switch">
                                                                    <input type="checkbox" class="form-check-input"
                                                                        id="full-import-enabled"
                                                                        name="fullImportEnabled">
                                                                    <label class="form-check-label"
                                                                        for="full-import-enabled">启用全量导入</label>
                                                                </div>
                                                                <div class="form-text">开启后将在同步开始时执行全量导入</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between mt-4">
                                <button type="button" class="btn btn-light" id="btn-load-config">
                                    <i class="bi bi-arrow-repeat me-1"></i>加载当前配置
                                </button>
                                <button type="submit" class="btn btn-primary" id="btn-save-config">
                                    <i class="bi bi-check-lg me-1"></i>保存配置
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="message-modal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-title">消息</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body" id="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast通知组件 -->
    <div class="position-fixed top-0 " style="z-index: 9999; margin: 15px;">
        <div id="toast-container" class="toast-container">
            <!-- Toast将动态添加到这里 -->
        </div>
    </div>

    <!-- 引入jQuery库 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 确保Bootstrap Toast组件可用
        document.addEventListener('DOMContentLoaded', function () {
            if (typeof bootstrap === 'undefined') {
                console.error('Bootstrap未加载');
            } else if (typeof bootstrap.Toast === 'undefined') {
                console.error('Bootstrap Toast组件未加载');
            } else {
                console.log('Bootstrap Toast组件已加载');
            }
        });
    </script>
    <script src="js/config.js"></script>
    <script>
        // 密码显示/隐藏切换功能
        document.addEventListener('DOMContentLoaded', function () {
            const toggleButtons = document.querySelectorAll('.toggle-password');

            toggleButtons.forEach(button => {
                button.addEventListener('click', function () {
                    const targetId = this.getAttribute('data-target');
                    const passwordInput = document.getElementById(targetId);
                    const icon = this.querySelector('i');

                    // 切换密码可见性
                    if (passwordInput.type === 'password') {
                        passwordInput.type = 'text';
                        icon.classList.remove('bi-eye');
                        icon.classList.add('bi-eye-slash');
                    } else {
                        passwordInput.type = 'password';
                        icon.classList.remove('bi-eye-slash');
                        icon.classList.add('bi-eye');
                    }
                });
            });
        });
    </script>
</body>

</html>